<template>
  <div>
    模块管理
    <!-- 功能区域 -->
    <div class="model-opt-btn">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>

    <!-- 搜索区域 -->
    <div class="model-search">
      <el-input v-model="search" placeholder="请输入内容" clearable @clear="load">
        <template #append>
          <el-button icon="el-icon-search" @click="load">搜索</el-button>
        </template>
      </el-input>
    </div>

    <!-- <el-button class="model-search-btn" @click="load" type="primary">搜索</el-button> -->

    <!-- 表格 -->
    <div>
      <el-table :data="tableData" border stripe class="model-tables">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="ID" sortable> </el-table-column>
        <el-table-column prop="modelname" label="名称" sortable> </el-table-column>
        <el-table-column prop="modeltype" label="类型" sortable> </el-table-column>
        <el-table-column prop="modelimg" label="预览图" sortable> </el-table-column>
        <el-table-column prop="modeldesc" label="描述" sortable> </el-table-column>
        <el-table-column prop="modelfiles" label="附件" sortable> </el-table-column>
        <el-table-column prop="modeldate" label="创建时间" sortable> </el-table-column>
        <el-table-column prop="modelmodel" label="创建人" sortable> </el-table-column>
        <el-table-column prop="modeldepartment" label="部门" sortable> </el-table-column>
        <el-table-column prop="modelprice" label="价格" sortable> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" size="mini">编辑</el-button>
            <el-popconfirm title="确定删除吗？" confirmButtonText="确定" cancelButtonText="取消" icon="el-icon-info" iconColor="red" @confirm="confirmEvent(scope.row.id)">
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 
 models: {
        // 表单对象
        modelname: "",
        modeltype: "",
        modelimg: "",
        modeldesc: "",
        modelfiles: "",
        modeldate: "",
        modelmodel: "",
        modeldepartment: "",
        modelprice: 0,
      },

-->
    <!-- 新增模块表单 -->
    <el-dialog width="500px" title="添加模块" v-model="addDialog">
      <el-form :model="models" :rules="rules" ref="models" label-width="90px">
        <el-form-item label="名称" prop="modelname">
          <el-input class="forminputs" v-model="models.modelname" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="modeltype">
          <el-input class="forminputs" v-model="models.modeltype" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="预览图" prop="modelimg">
          <el-input class="forminputs" v-model="models.modelimg" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="modeldesc">
          <el-input type="textarea" class="forminputs" v-model="models.modeldesc" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="modeldate">
          <el-input class="forminputs" v-model="models.modeldate" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="modelmodel">
          <el-input class="forminputs" v-model="models.modelmodel" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="modeldepartment">
          <el-input class="forminputs" v-model="models.modeldepartment" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="modelprice">
          <el-input class="forminputs" v-model="models.modelprice" autocomplete="off" clearable></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeForm('models')">取 消</el-button>
          <el-button type="primary" @click="save('models')">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import request from "../utils/request.js"; // axios请求工具类
export default {
  data() {
    return {
      addDialog: false, // 新增模块弹窗
      search: "", // 搜索字符
      pageNum: 1, // 当前页码
      pageSize: 10, //每页多少条
      total: 0, //总条数
      tableData: [], // 表格对象
      models: {
        // 表单对象
        modelname: "",
        modeltype: "",
        modelimg: "",
        modeldesc: "",
        modelfiles: "",
        modeldate: "",
        modelmodel: "",
        modeldepartment: "",
        modelprice: 0,
      },
      rules: {
        // 表单校验规则
        modelname: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        // modeltype: [
        //   { required: true, message: "请选择类型", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modelimg: [
        //   { required: true, message: "请选择预览图", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modeldesc: [
        //   { required: true, message: "请输入模块名", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modelfiles: [
        //   { required: true, message: "请输入模块名", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modeldate: [
        //   { required: true, message: "请输入模块名", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modelmodel: [
        //   { required: true, message: "请输入模块名", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modeldepartment: [
        //   { required: true, message: "请输入模块名", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // modelprice: [
        //   { required: true, message: "请输入模块名", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 10,
        //     message: "长度在 1 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  created() {
    // console.log("页面初始化完成！");
    this.load();
  },
  activated() {
    // 实时更新表格数据
    // console.log("加载数据！");
    this.load();
  },
  methods: {
    // 加载数据
    load() {
      this.tableData = [];
      request
        .get("/api/model/pageModel", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            search: this.search,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.pageSize = res.data.size;
          this.pageNum = res.data.current;
        });
    },

    // 保存模块
    save(models) {
      this.$refs[models].validate((valid) => {
        if (valid) {
          console.log("校验成功");
          request.post("/api/model/saveModel", this.models).then(
            (res) => {
              // 加载数据
              this.load();
              this.$message.success({
                message: res.msg,
                showClose: true,
              });
            },
            (error) => {
              this.$message.error({
                showClose: true,
                message: "更新模块失败</br>" + error,
                dangerouslyUseHTMLString: true,
              });
            }
          );
          this.$data.addDialog = false;
          this.ruleForm = {};
          console.log("提交数据完成");
        } else {
          console.log("校验失败");
          return false;
        }
      });
    },
    // 删除模块
    delModel(e) {
      var url = "/api/model/delModel/";
      request.delete(url + e).then(
        (res) => {
          // 加载数据
          this.load();
          this.$message.success({
            message: res.msg,
            showClose: true,
          });
        },
        (error) => {
          this.$message.error({
            showClose: true,
            message: "删除模块失败</br>" + error,
            dangerouslyUseHTMLString: true,
          });
        }
      );
    },

    // 新增弹窗
    add(ruleForm) {
      this.$data.addDialog = true;
      this.ruleForm = {};
      this.ruleForm.sex = "男";
      // this.load();
    },
    // 关闭新增
    closeForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
      this.addDialog = false;
      // this.load();
    },
    // 编辑表格按钮
    handleClick(e) {
      this.ruleForm = JSON.parse(JSON.stringify(e));
      this.$data.addDialog = true;
    },

    //每页最多显示条数10   20   30   50
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    //翻页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.load();
    },
    // 删除模块
    confirmEvent(e) {
      console.log("删除模块：" + e);
      this.delModel(e);
    },
  },
};
</script>
<style scoped>
/* 表格 */
.model-table {
  width: 100%;
  padding: 10px;
}

/* 功能区域按钮 */
.model-opt-btn {
  margin: 5px 0;
}

/* 搜索区域 */
.model-search {
  margin: 5px 0;
  width: 30%;
}

/* 搜索按钮 */
.model-search-btn {
  margin-left: 5px;
}

/* 新增模块表单 */
.forminputs {
  width: 85%;
}

/* 分页 */
.model-pages {
  margin: 10px 0;
}
</style>